<template>
  <div class="index">
    <div class="top">
      <div class="top-info">
        <img src="../assets/images/host.png" alt="" />
        <div class="top-info-font">
          <span>主机数量</span>
          <div>
            <span>{{ data.hostNum }}</span> 个
          </div>
        </div>
      </div>
      <div class="top-info">
        <img src="../assets/images/memory.png" alt="" />
        <div class="top-info-font">
          <span>内存总和</span>
          <div>
            <span>{{ data.memorySum }}</span> G
          </div>
        </div>
      </div>
      <div class="top-info">
        <img src="../assets/images/cpu.png" alt="" />
        <div class="top-info-font">
          <span>CPU核数总和</span>
          <div>
            <span>{{ data.CPUcoresSum }}</span>
          </div>
        </div>
      </div>
      <div class="top-info" style="border: 0">
        <img src="../assets/images/storage.png" alt="" />
        <div class="top-info-font">
          <span>存储容量总和</span>
          <div>
            <span>{{ data.storageSum }}</span> T
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="middle-head">
        <div class="title">主机内存使用率、CPU使用率</div>
        <div class="more" @click="goToHost">查看更多</div>
      </div>
      <div id="main" ref="main" style="height: 500px; padding-top: 3%"></div>
    </div>
    <div class="bottom">
      <div class="bottom-chart">
        <div class="bottom-chart-head">
          <div class="title">磁盘使用率排序</div>
          <div class="more" @click="goToHost">查看更多</div>
        </div>
        <div id="memory" ref="memory" style="height: 500px"></div>
      </div>
      <div class="bottom-chart">
        <div class="bottom-chart-head">
          <div class="title">系统日志</div>
        </div>
        <dv-scroll-board
          :config="config"
          style="height: 500px; padding-top: 3%"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import * as echarts from "echarts";
import { reactive } from "vue";
import { getIndexData } from "../api/index";

const { proxy } = getCurrentInstance();
const router = useRouter();
const main = ref(null);
const memory = ref(null);
let config = reactive({
  data: [
    ["测试ftp连通错误:155.138.224.175"],
    ["FTP检测告警：155.138.224.175"],
    ["测试ftp连通错误:155.138.224.175"],
    ["FTP检测告警：155.138.224.175"],
    ["snmp设备监测告警：155.138.224.175(一楼交换机1)"],
    ["测试ftp连通错误:155.138.161.224"],
    ["连接数据库错误：内存sqlite"],
    ["FTP检测告警：155.138.161.224"],
    ["FTP检测告警：155.138.161.224"],
    ["snmp设备监测告警：155.138.224.175(1和2接口)"],
    ["端口telnet不通告警：mongodb，telnet-96.30.196.251-27017"],
    ["端口telnet不通告警：mongodb，telnet-96.30.196.251-27017"],
    ["端口telnet不通告警：mongodb，telnet-96.30.196.251-27017"],
    ["FTP检测告警：155.138.224.175"],
    ["端口telnet不通告警：mongodb，telnet-96.30.196.251-27017"],
  ],
  index: true,
  columnWidth: [50],
  rowNum: 9,
});
let data = reactive({
  hostNum: 15, //主机数量
  memorySum: 136.9, //内存总和(G)
  CPUcoresSum: 131, //CPU核数总和
  storageSum: 7.1, //存储容量总和(T)
  mainData: ["192.168.49.205"],
  memoryRate: [17.78],
  cpuRate: [1.14],
  memoryData: [],
  diskRate: [],
  newsinfo: [
    ["测试ftp连通错误:155.138.224.175"],
    ["FTP检测告警：155.138.224.175"],
    ["测试ftp连通错误:155.138.224.175"],
    ["FTP检测告警：155.138.224.175"],
    ["snmp设备监测告警：155.138.224.175(一楼交换机1)"],
    ["测试ftp连通错误:155.138.161.224"],
    ["连接数据库错误：内存sqlite"],
    ["FTP检测告警：155.138.161.224"],
    ["FTP检测告警：155.138.161.224"],
    ["snmp设备监测告警：155.138.224.175(1和2接口)"],
    ["端口telnet不通告警：mongodb，telnet-96.30.196.251-27017"],
    ["端口telnet不通告警：mongodb，telnet-96.30.196.251-27017"],
    ["端口telnet不通告警：mongodb，telnet-96.30.196.251-27017"],
    ["FTP检测告警：155.138.224.175"],
    ["端口telnet不通告警：mongodb，telnet-96.30.196.251-27017"],
  ],
});

//跳转主机监控
function goToHost() {
  router.push("/system/allConnect");
}

function init() {
  getIndexData().then((response) => {
    let res = response.data;
    data.hostNum = res.hostNum;
    data.memorySum = res.memorySum;
    data.CPUcoresSum = res.CPUcoresSum;
    data.storageSum = res.storageSum;
    data.mainData = res.mainData;
    data.memoryRate = res.memoryRate;
    data.cpuRate = res.cpuRate;
    data.memoryData = res.memoryData;
    data.diskRate = res.diskRate;
    getList()
  });
}

function getList() {
  const main = document.querySelector("#main");
  main.removeAttribute("_echarts_instance_");
  var mainChart = echarts.init(main);
  mainChart.setOption({
    tooltip: {
      trigger: "axis",
      valueFormatter: (value) => value + "%",
    },
    legend: {
      data: ["内存使用率", "CPU使用率"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {},
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.mainData,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "内存使用率",
        type: "line",
        // stack: "Total",
        data: data.memoryRate,
        areaStyle: {},
      },
      {
        name: "CPU使用率",
        type: "line",
        // stack: "Total",
        data: data.cpuRate,
        areaStyle: {},
      },
    ],
  });
  const memory = document.querySelector("#memory");
  memory.removeAttribute("_echarts_instance_");
  var memoryChart = echarts.init(memory);
  memoryChart.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      valueFormatter: (value) => value + "%",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: data.memoryData,
    },
    series: [
      {
        name: "磁盘使用率",
        type: "bar",
        barWidth: 30,
        showBackground: true,
        label: {
          show: true,
          position: "right",
          fontSize: 16,
          color: "#188df0",
          formatter: "{c}%",
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" },
          ]),
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#2378f7" },
              { offset: 0.7, color: "#2378f7" },
              { offset: 1, color: "#83bff6" },
            ]),
          },
        },
        data: data.diskRate,
      },
    ],
  });
}

nextTick(() => {
  init();
  getList();
});
</script>

<style lang="scss">
.index {
  width: 100%;
  .top {
    display: flex;
    height: 15%;
    margin: 0px 2%;
    border-bottom: 1px solid #f4f4f5;
    font-size: 16px;
    font-weight: bold;
    .top-info {
      width: 25%;
      margin: 2% 0;
      border-right: 1px solid #f4f4f5;
      display: flex;
      justify-content: center;
      align-items: center;
      .top-info-font {
        padding-left: 5%;
      }
      .top-info-font div {
        padding-top: 15%;
        font-size: 14px;
      }
      .top-info-font div span {
        font-size: 26px;
        font-weight: bold;
        font-family: math;
      }
    }
  }
  .middle {
    height: 50%;
    margin: 3%;
    .middle-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .title {
        font-size: 16px;
        font-weight: bold;
      }
      .more {
        cursor: pointer;
        font-size: 12px;
        color: #165dff;
      }
    }
  }
  .bottom {
    height: 50%;
    padding: 3% 0;
    border-top: 1px solid #f4f4f5;
    display: flex;
    .bottom-chart {
      width: 50%;
      height: 100%;
      padding: 0 3%;
      .bottom-chart-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .title {
          font-size: 16px;
          font-weight: bold;
        }
        .more {
          cursor: pointer;
          font-size: 12px;
          color: #165dff;
        }
      }
    }
  }
}
</style>

